<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>供应商</title>
	<style type="text/css">
	*{margin: 0; padding: 0;}
	 .page{ width:1200px; margin: 0 auto; overflow: hidden; position: relative; display: none;}
    .page1{ display: block; }
       .page img{ width: 100%}
      .page:nth-child(1){display: block;}
      .pane{ border: 2px solid red; }
      .pane1{ width: 152px; height: 54px; position: absolute; top: 8.9%; right: 18.7%}
	 }
	 .clearfix{clear: both;}
      .pane2{ width: 340px; height: 50px;  position: absolute; top:44.1%; right: 7%}
      .pane3{ width: 124px; height: 42px;  position: absolute; top:9.2%; right: 6%}
      .pane4{ width: 124px; height: 30px;  position: absolute; top:43.1%; left: 9%}
      .pane5{ width: 64px; height: 24px;  position: absolute; top:44.5%;right: 16%}
      .pane6{ width: 76px; height: 34px;  position: absolute; bottom: 12.7%; right: 18.7%}
      .pane7{ width: 48px; height: 30px;  position: absolute; top:48.6%;right: 31.8%}
      .pane8{ width: 84px; height: 24px;  position: absolute; top:22.4%; left: 15.2%}
      .pane8_2{ width: 46px; height: 24px;  position: absolute; top:49.5%;right: 16.4%}
      .pane9{ width: 50px; height: 24px;  position: absolute; bottom:11.2%;right:30.6%}
      .pane9_2{ width: 50px; height: 24px;  position: absolute; bottom:52.2%;right:40%}
      .pane9_3{ width: 130px; height: 24px;  position: absolute; bottom:45.2%;right:39.6%}
      .pane10{ width: 58px; height: 24px;  position: absolute; top:49.6%;right: 16%}
	</style>
	<script src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
	<div class="page page1">
	  <img src="images/caigoufang-1 -1.png">
	  <div class="pane pane1"></div>
	</div>
	<div class="page page2">
		<img src="images/caigoufang-2.png">
          <div class="pane pane2"></div>
	</div>
	<div class="page page3">
		<img src="images/caigoufang-3.png">
          <div class="pane pane3"></div>
	</div>
  <div class="page page4">
    <img src="images/gongyingshang-4.png">
          <div class="pane pane4"></div>
  </div>
  <div class="page page5 to1200">
    <img src="images/gongyingshang-5.png">
          <div class="pane pane5"></div>
  </div>

  <div class="page page6">
    <img src="images/gongyingshang-6.png">
          <div class="pane pane6"></div>
  </div>

  <div class="page page7">
    <img src="images/gongyingshang-7.png">
          <div class="pane pane7"></div>
  </div>

  <div class="page page8 to1200">
    <img src="images/gongyingshang-8.png">
          <div class="pane pane8"></div>
          <div class="pane pane8_2"></div>
  </div>

  <div class="page page9">
    <img src="images/tip-3.png" style="width:171px; position:absolute; top:340px; right:170px">
    <img src="images/tip-4.png" style="width:171px; position:absolute; top:460px; right:170px">
    <img src="images/tip-5.png" style="width:147px; position:absolute; top:760px; right:190px">
    <img src="images/fujian2.png">
          <div class="pane pane9"></div>
          <div class="pane pane9_2"></div>
          <div class="pane pane9_3"></div>
  </div>

  <div class="page page10">
    <img src="images/gongyingshang-10.png">
          <div class="pane pane10"></div>
  </div>

  <div class="page page11 last">
    <img src="images/gongyingshang-11.png">
  </div>
	<script>
                $(function(){
                	timer=setInterval(function(){
                		$(".pane").toggle()
                	},600);
                    
                	$(".page").click(function(){
                        if($(this).hasClass('to1200')){
                          $(this).hide();
                          $(this).next().stop().show(0,function(){
                            $('html, body').animate({  
                                 scrollTop: 1200  
                             },100); 
                          })
                        }
                         if($(this).hasClass('last')){
                          return false;
                        }
                        else{
                          $(this).hide();
                          $(this).next().stop().show()
                        } 
                  })
                	
                })
	</script>
</body>
</html>